<template>
	<view class="index-main">
		<up-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5"
			bgColor="#ffffff" interval="2000"></up-swiper>
	</view>
	<view class="grid-box">
		<!-- 宫格标签 -->
		<up-grid :border="false" col="4">
			<up-grid-item v-for="(baseListItem,baseListIndex) in list" :key="baseListIndex"
				@click="click(baseListItem)">
				<image class="grid-img" :src="baseListItem.imgUrl"></image>
				<text class="grid-text">{{baseListItem.title}}</text>
			</up-grid-item>
		</up-grid>
		<up-toast ref="uToastRef" />
		<!-- 切页 -->
		<view class="tabs-list flexR">
			<up-tabs :list="tabList" @click="tabBut" :itemStyle="{width:'150px',height:'46px'}"
				lineWidth="30"></up-tabs>
		</view>
		<!-- 热门电影 -->
		<view class="list-mian">
			<view class="list-box flexR" v-for="item in 10" @click="listboxbut()">
				<image src="http://43.139.86.28:5000/poster/H01.jpg" class="list-img"></image>
				<view class="list-info-box">
					<view class="list-info">沙丘</view>
					<view class="list-info">
						<up-tag class="tag" text="IMAX" plain size="mini" type="warning"></up-tag>
						<up-tag class="tag" text="3D" plain size="mini" type="success"></up-tag>
					</view>
					<view class="list-info">观众评分:4.0</view>
					<view class="list-info">导演:XXXX</view>
					<view class="list-info text-over">主演:XXXX,XXXX,XXXX,XXXX</view>
				</view>
				<view class="list-but">购票</view>
			</view>
		</view>
	</view>
	<tarBar :navIndex="0"></tarBar>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import tarBar from '../../componenbts/tarBar.vue'

	const list3 = ref([
		'http://43.139.86.28:5000/poster/H01.jpg',
		'http://43.139.86.28:5000/poster/H02.jpg',
		'http://43.139.86.28:5000/poster/H03.jpg',
	]);

	onMounted(() => {

	})

	const tabList = reactive([{
			name: '正在热映'
		},
		{
			name: '即将上映'
		}
	])

	const list = ([{
			imgUrl: '/static/icon/fenlei.png',
			title: '分类',
			url: '/pages/sort/sort'
		},
		{
			imgUrl: '/static/icon/qupiao.png',
			title: '取票',
			url: '/pages/my/ticketList'
		},
		{
			imgUrl: '/static/icon/choujiang.png',
			title: '抽奖',
			url: '/pages/my/prizeDraw'
		},
		{
			imgUrl: '/static/icon/yaoqing.png',
			title: '邀请'
		}
	])
	const click = (val) => {
		if (val.title == '分类') {
			uni.switchTab({
				url: val.url
			})
		} else {
			uni.navigateTo({
				url: val.url
			})
		}
	}

	//页面切换
	const tabBut = (val) => {
		console.log(val)
	}
	//详情跳转
	const detailsJup = () => {

	}

	function listboxbut() {
		wx.navigateTo({
			url: '/pages/details/details',
		})
	}
</script>

<style lang="scss" scoped>
	.index-main {
		width: 100%;
	}

	.grid-box {
		padding: 20rpx 0;

	}

	.grid-img {
		width: 80rpx;
		height: 80rpx;
	}

	.tabs-list {
		justify-content: center;
	}

	.list-mian {
		padding: 20rpx;

		.list-box {
			// height: 200rpx;
			padding: 20rpx;
			border-bottom: 1rpx #eeeeee solid;


			.list-img {
				flex: 1;
				width: 180rpx;
				height: 240rpx;
			}

			.list-info-box {
				padding: 0 20rpx;

				.list-info {
					padding-bottom: 10rpx;

					.tag {
						margin-right: 10rpx;
					}
				}


				.list-info:last-child {
					padding-bottom: 0;
					width: 400rpx;
				}
			}

			.list-but {
				background: #00aa00;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 8rpx;
				color: #ffffff;
				font-size: 28rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>

<style>
	.u-tabs__wrapper__nav__item__text.data-v-0546c3e4 {
		font-size: 38rpx !important;
	}
</style>